<template>
  <page-header-wrapper>
    <template v-slot:content>
      <p style='border-left: 2px solid #d7d5d5;padding-left: 10px;'>
        悬浮在标题上可以查看该配置的作用
      </p>
    </template>
    <!--答题时间设置-->
    <a-card>
      <a-popover title='作用' placement='topLeft'>
        <template slot='content'>
          <p>在开放时间范围内 新人用户方可
            <a-tag color='blue'>查看题目列表/查看题目详情/提交解题</a-tag>
          </p>
          <p>对于协会内用户
            <a-tag color='green'>可看可答</a-tag>
          </p>
        </template>
        <a-divider orientation='left'>答题开放时间设置</a-divider>
      </a-popover>
      <a-form
        layout='inline'
        :form='form'
        @submit='handleSubmit'>
        <a-spin :spinning='spinning'>
          <a-alert
            :message="'当前系统设置的答题时间为 [ '  + startTime  + ' 至 ' + endTime + ' ]  如无错误请勿随意修改'"
            type='warning'
            show-icon
            style='margin-bottom: 18px;' />
        </a-spin>
        
        <a-form-item label='日期' style='margin-left: 20px;'>
          <a-date-picker
            style='width: 100%;'
            v-decorator="['date', { rules: [{ required: true, message: '日期不能为空' }] },]"
          />
        </a-form-item>
        
        <a-form-item label='开始时间'>
          <a-time-picker
            style='width: 100%;'
            v-decorator="['start', { rules: [{ required: true, message: '开始时间不能为空' }] },]"
            :open='open'
            placeholder='开始时间'
            @openChange='handleOpenChange'>
            <div slot='addon'>
              <a-tag color='pink'>格式: HH:mm:ss</a-tag>
              <a-button
                style='border-radius: 10px;margin-right: 5px;'
                size='small'
                type='primary'
                @click='handleClose'>
                确认
              </a-button>
            </div>
          </a-time-picker>
        
        </a-form-item>
        
        <a-form-item label='结束时间'>
          <a-time-picker
            style='width: 100%;'
            v-decorator="['end', { rules: [{ required: true, message: '结束时间不能为空' }] },]"
            :open='open2'
            placeholder='结束时间'
            @openChange='handleOpenChange2'>
            <div slot='addon'>
              <a-tag color='pink'>格式: HH:mm:ss</a-tag>
              <a-button
                style='border-radius: 10px;margin-right: 5px;'
                size='small'
                type='primary'
                @click='handleClose'>
                确认
              </a-button>
            </div>
          </a-time-picker>
        </a-form-item>
        
        <a-form-item>
          <a-space>
            <a-button @click='() => this.form.resetFields()'>重置</a-button>
            <a-button type='primary'
                      @click='showConfirm'
                      :loading='loading'>确认
            </a-button>
          </a-space>
        </a-form-item>
      
      </a-form>
      
      <a-divider></a-divider>
    </a-card>
    
    
    <!--二轮招新时间地点设置-->
    <SecondRound />
    
    <!--注册开关设置-->
    <a-card style='margin-top: 50px;'>
      <a-divider orientation='left'>注册开关设置</a-divider>
      
      <a-form layout='inline'>
        <a-form-item label='注册开关'>
          <a-tooltip>
            <template slot='title'>
              开关开启时 将不允许用户注册
            </template>
            <a-switch :checked='enableRegister'
                      @change='onChange'
                      checked-children='开启'
                      un-checked-children='关闭' />
          </a-tooltip>
        </a-form-item>
        
        <a-form-item>
          <a-space>
            <a-button type='primary'
                      @click='setRegisterStatus'
                      :loading='loadingReg'>确认
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
      <a-divider></a-divider>
    </a-card>
    
    <!--定时任务-->
    <Job />
  
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { getAnsTime, getRegStatus, setAnsTime, setRegStatus } from '@/api/systemConfig'
import JudgerManager from '@/views/system/JudgerManager.vue'
import SecondRound from '@/views/system/SecondRound.vue'
import Job from '@/views/system/Job.vue'

export default {
  name: 'Setting',
  components: {
    JudgerManager,
    SecondRound,
    Job
  },
  data() {
    return {
      open: false,
      open2: false,
      form: this.$form.createForm(this, { name: 'date' }),
      startTime: '',
      endTime: '',
      enableRegister: false,
      loading: false,
      loadingReg: false,
      spinning: false
    }
  },
  created() {
    this.getAnsTime()
    this.getRegisterStatus()
  },
  methods: {
    moment,
    handleOpenChange(open) {
      this.open = open
    },
    handleOpenChange2(open2) {
      this.open2 = open2
    },
    handleClose() {
      this.open = false
      this.open2 = false
    },
    showConfirm() {
      this.form.validateFields((err, values) => {
        if (!err) {
          let fieldsValue = this.form.getFieldsValue()
          // 取出参数
          let date = moment(fieldsValue.date).format('YYYY-MM-DD')
          let start = moment(fieldsValue.start).format('HH:mm:ss')
          let end = moment(fieldsValue.end).format('HH:mm:ss')
          
          let than = this
          this.$confirm({
            title: '确认修改答题时间',
            width: 500,
            content: h =>
              <div style='color:red;'>
            <span>
              时间:&nbsp;&nbsp; {date} {start} &nbsp;&nbsp;至&nbsp;&nbsp;  {date} {end}
            </span>
                <br />
              </div>,
            onOk() {
              than.handleSubmit()
            },
            onCancel() {
            },
            class: 'test'
          })
        }
      })
    },
    handleSubmit() {
      this.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          values.date = moment(values.date).format('YYYY-MM-DD').valueOf()
          values.start = moment(values.start).format('HH:mm:ss').valueOf()
          values.end = moment(values.end).format('HH:mm:ss').valueOf()
          let curTime = moment().format('YYYY-MM-DD').valueOf()
          if (curTime > values.date) {
            this.openNotificationWithIcon('error', '错误提醒', '设置的日期不能小于当前天')
            return
          }
          if (values.start >= values.end) {
            this.openNotificationWithIcon('error', '错误提醒', '结束时间不能小于开始时间')
            return
          }
          // 设置答题时间
          setAnsTime(values).then(response => {
            this.$message.success(response.msg)
            this.getAnsTime()
          })
        }
      })
      this.loading = false
    },
    openNotificationWithIcon(type, message, description) {
      this.$notification[type]({
        message,
        description
      })
    },
    // 获取答题时间
    getAnsTime() {
      this.spinning = true
      getAnsTime().then(response => {
        this.startTime = response.data.date + ' ' + response.data.start
        this.endTime = response.data.date + ' ' + response.data.end
        this.spinning = false
      })
    },
    onChange(checked) {
      this.enableRegister = checked
    },
    // 获取注册开关状态
    getRegisterStatus() {
      getRegStatus().then(response => {
        this.enableRegister = response.data
      })
    },
    setRegisterStatus() {
      this.loadingReg = true
      setRegStatus(this.enableRegister).then(() => {
        this.getRegisterStatus()
        this.$message.success('设置成功')
        this.loadingReg = false
      })
    }
  }
}
</script>

<style scoped lang='less'>
</style>